<!--
 * @Author: sbotlp
 * @Email: sbotlp@sina.com
 * @Date: 2019-11-16 22:04:28
 * @LastEditTime: 2019-11-16 23:27:13
 * @Description: http://www.sbotlp.com.cn
 -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div>proimse test</div>
  <script>
    function loadImage(src) {
      const proimse = new Promise((resolve, reject) => {
        const img = document.createElement('img');
        img.src = src;
        img.onload=function() {
          resolve(img);
        }
        img.onerror=function(error) {
          reject('图片加载失败');
        }
        // throw new Error('自定义报错');
      })
      return proimse;
    }
    /* const src = `https://api.sbotlp.com.cn/public/image/20191106/1573030513.png`;
    const result = loadImage(src);
    result.then(res => {
      console.log('res:1 ', res);
      console.log('res.width:1 ', res.width);
    }).catch(err1 => {
      console.log('err1: ', err1);
    });
    result.then(res => {
      console.log('res:2 ', res.height);
    }).catch(err2 => {
      console.log('err2: ', err2);
    }); */

    //链式调用
    // 每个then只接受两个函数参数，最后统一catch捕获异常；
    // 链式调用一点要记得return出值，不然下次调用会出现 undefined；
    // const src = `https://api.sbotlp.com.cn/public/image/20191106/1573030513_error.png`;
/*     const src1 = `https://api.sbotlp.com.cn/public/image/20190924/1569308973.png`;
    const result = loadImage(src);
    result.then(res3 => {
      console.log('res3: ', res3);
      return res3;
    }).then(res4 => {
      console.log('res4: ', res4);
      return res4
    }).then(res5 => {
      console.log('res5: ', res5);
      return res5;
    }).catch(err3 => {
      console.log('err3: ', err3);
    }); */

    // 多个串联
  /*   const src1 = `https://api.sbotlp.com.cn/public/image/20191106/1573030513.png`;
    const src2 = `https://api.sbotlp.com.cn/public/image/20190924/1569308973.png`;
    const result1 = loadImage(src1);
    const result2 = loadImage(src2);
    result1.then(res1 => {
      console.log('第一张图片加载完成');
      console.log('res1: ', res1);
      return result2; // 重要，下一个then 是result2的then
    }).then(res2 => {
      console.log('第二张图片加载完成');
      console.log('res2: ', res2);
    }).catch(err => {
      console.log('err: ', err);
    }); */
    
    // Promise.all && Promise.race
    const src1 = `https://api.sbotlp.com.cn/public/image/20191106/1573030513.png`;
    const src2 = `https://api.sbotlp.com.cn/public/image/20190924/1569308973.png`;
    const result1 = loadImage(src1);
    const result2 = loadImage(src2);
    // 所有都加载完成才会执行success
    Promise.all([result1,result2]).then(datas => {
      console.log('datas: ', datas);
      console.log('datas[0]: ', datas[0]);
      console.log('datas[1]: ', datas[1]);
    });  
    //  只要有提个加载完成了，就执行success，所以race 一定是要比all 快的
    // 可用作封装成 【连接超时】 功能
    Promise.race([result1,result2]).then(data => {
      console.log('race-data: ', data);
    });
    /* 
      总结
      1、任何技术推广使用都需要一套标准来支撑；（Promise 标准）
       - 如 html js css http 等，无规矩不成方圆
       - 任何不符合标准的东西，终将会被用户抛弃
       - 不要挑战标准，不要自造标准
      2、三种状态，pending、fufilled、rejected
        - 初始状态是 pending；
        - pending 变为 fulfilled（成功），或者 pending 变为 rejected（失败）
        - 状态变化不可逆
      3、then
        - Promise 实例必须实现then方法
        - then 必须可接收两个函数作为参数
        - then 返回的必须是一个Promise 实例
    
    */
  </script>
</body>
</html>